<script setup>
import { ref } from 'vue'
import { reactive } from 'vue'

const count = ref(12)
console.log(count);
// console.log(count);


const parentMessage = ref('Parent')
const items = ref([{ message: 'Foo' }, { message: 'Bar' }])

const name = ref('fuck the world')

// 方法事件处理器
function greet(event) {
  alert(`Hello ${name.value}`) 
  if(event){
    alert(event.target.tagName)
  }
}

const myObject = reactive({
  title: 'How to do lists in Vue',
  author: 'Jane Doe',
  publishedAt: '2016-04-10'
})

</script>

<template>
  <div class="box1">{{ count }} <button @click="count++">点我</button></div>
  <!-- ok 不显示的 -->
  <h1 v-show="true">Hello-1!</h1>
  <h1 v-show="1">Hello-2!</h1>
  <h1 v-show="1 === 1">Hello-3!</h1>
  <hr>
  <li v-for="item in items">{{ item.message }}</li>
  <hr>
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
  <hr>
  <li v-for="(value, key, index) in myObject">
    {{ index }}. {{ key }}: {{ value }}
  </li>
  <hr>
  <button @click="greet">Greet</button>
</template>

<style scoped>
.box1 {
  color: tomato;
  font-size: 40px;
  /* background-color: #bfa; */
}
</style>
